<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .scroll__table__body {
        color: rgba(0, 0, 0, 0.65);
        width: calc(27vw + 10px);
        height: calc(100vh - 330px);
        overflow-x: scroll;
        position: relative;
      }
      .scroll__table__body__row {
        display: flex;
      }
      .scroll__table__body__row__item {
        flex-shrink: 0;
        min-height: 44px;
        padding: 15px;
        display: flex;
        line-height: 22px;
        align-items: center;
        word-break: break-all;
        cursor: pointer;
        border-bottom: 1px solid #e8e8e8;
      }
    </style>
  </head>
  <body>
    <div id="init-table-body" class="scroll__table__body init-table-body">
      <div data-v-5e61d8d5="" class="scroll__table__body__row pagerow0">
        <div
          id="page0-row0-col0"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          2021-01-16 04:43:03
        </div>
        <div
          id="page0-row0-col1"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          111111111
        </div>
        <div
          id="page0-row0-col2"
          class="scroll__table__body__row__item"
          style="width: 62px; background: rgb(255, 255, 255)"
        >
          活期
        </div>
        <div
          id="page0-row0-col3"
          class="scroll__table__body__row__item"
          style="width: 77px; background: rgb(255, 255, 255)"
        >
          00000
        </div>
      </div>
      <div data-v-5e61d8d5="" class="scroll__table__body__row pagerow0">
        <div
          id="page0-row0-col0"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          2021-01-16 04:43:03
        </div>
        <div
          id="page0-row0-col1"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          111111111
        </div>
        <div
          id="page0-row0-col2"
          class="scroll__table__body__row__item"
          style="width: 62px; background: rgb(255, 255, 255)"
        >
          活期
        </div>
        <div
          id="page0-row0-col3"
          class="scroll__table__body__row__item"
          style="width: 77px; background: rgb(255, 255, 255)"
        >
          00000
        </div>
      </div>
      <div data-v-5e61d8d5="" class="scroll__table__body__row pagerow1">
        <div
          id="page0-row0-col0"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          2021-01-16 04:43:03
        </div>
        <div
          id="page0-row0-col1"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          111111111
        </div>
        <div
          id="page0-row0-col2"
          class="scroll__table__body__row__item"
          style="width: 62px; background: rgb(255, 255, 255)"
        >
          活期
        </div>
        <div
          id="page0-row0-col3"
          class="scroll__table__body__row__item"
          style="width: 77px; background: rgb(255, 255, 255)"
        >
          00000
        </div>
      </div>
      <div data-v-5e61d8d5="" class="scroll__table__body__row pagerow1">
        <div
          id="page0-row0-col0"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          2021-01-16 04:43:03
        </div>
        <div
          id="page0-row0-col1"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          111111111
        </div>
        <div
          id="page0-row0-col2"
          class="scroll__table__body__row__item"
          style="width: 62px; background: rgb(255, 255, 255)"
        >
          活期
        </div>
        <div
          id="page0-row0-col3"
          class="scroll__table__body__row__item"
          style="width: 77px; background: rgb(255, 255, 255)"
        >
          00000
        </div>
      </div>
      <div data-v-5e61d8d5="" class="scroll__table__body__row pagerow1">
        <div
          id="page0-row0-col0"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          2021-01-16 04:43:03
        </div>
        <div
          id="page0-row0-col1"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          1111111
        </div>
        <div
          id="page0-row0-col2"
          class="scroll__table__body__row__item"
          style="width: 62px; background: rgb(255, 255, 255)"
        >
          活期
        </div>
        <div
          id="page0-row0-col3"
          class="scroll__table__body__row__item"
          style="width: 77px; background: rgb(255, 255, 255)"
        >
          00000
        </div>
      </div>
      <div data-v-5e61d8d5="" class="scroll__table__body__row pagerow2">
        <div
          id="page0-row0-col0"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          2021-01-16 04:43:03
        </div>
        <div
          id="page0-row0-col1"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          111111111
        </div>
        <div
          id="page0-row0-col2"
          class="scroll__table__body__row__item"
          style="width: 62px; background: rgb(255, 255, 255)"
        >
          活期
        </div>
        <div
          id="page0-row0-col3"
          class="scroll__table__body__row__item"
          style="width: 77px; background: rgb(255, 255, 255)"
        >
          00000
        </div>
      </div>
      <div data-v-5e61d8d5="" class="scroll__table__body__row pagerow2">
        <div
          id="page0-row0-col0"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          2021-01-16 04:43:03
        </div>
        <div
          id="page0-row0-col1"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          111111111
        </div>
        <div
          id="page0-row0-col2"
          class="scroll__table__body__row__item"
          style="width: 62px; background: rgb(255, 255, 255)"
        >
          活期
        </div>
        <div
          id="page0-row0-col3"
          class="scroll__table__body__row__item"
          style="width: 77px; background: rgb(255, 255, 255)"
        >
          00000
        </div>
      </div>
      <div data-v-5e61d8d5="" class="scroll__table__body__row pagerow2">
        <div
          id="page0-row0-col0"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          2021-01-16 04:43:03
        </div>
        <div
          id="page0-row0-col1"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          111111111
        </div>
        <div
          id="page0-row0-col2"
          class="scroll__table__body__row__item"
          style="width: 62px; background: rgb(255, 255, 255)"
        >
          活期
        </div>
        <div
          id="page0-row0-col3"
          class="scroll__table__body__row__item"
          style="width: 77px; background: rgb(255, 255, 255)"
        >
          00000
        </div>
      </div>
      <div data-v-5e61d8d5="" class="scroll__table__body__row pagerow3">
        <div
          id="page0-row0-col0"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          2021-01-16 04:43:03
        </div>
        <div
          id="page0-row0-col1"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          111111111
        </div>
        <div
          id="page0-row0-col2"
          class="scroll__table__body__row__item"
          style="width: 62px; background: rgb(255, 255, 255)"
        >
          活期
        </div>
        <div
          id="page0-row0-col3"
          class="scroll__table__body__row__item"
          style="width: 77px; background: rgb(255, 255, 255)"
        >
          00000
        </div>
      </div>
      <div data-v-5e61d8d5="" class="scroll__table__body__row pagerow3">
        <div
          id="page0-row0-col0"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          2021-01-16 04:43:03
        </div>
        <div
          id="page0-row0-col1"
          class="scroll__table__body__row__item"
          style="width: 203px; background: rgb(255, 255, 255)"
        >
          111111111
        </div>
        <div
          id="page0-row0-col2"
          class="scroll__table__body__row__item"
          style="width: 62px; background: rgb(255, 255, 255)"
        >
          活期
        </div>
        <div
          id="page0-row0-col3"
          class="scroll__table__body__row__item"
          style="width: 77px; background: rgb(255, 255, 255)"
        >
          00000
        </div>
      </div>
    </div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
      function computedStyle() {
        let initTopList = [];
        const firstClassPageNum = this.$("#init-table-body")
          .children(".scroll__table__body__row:first-child")
          .attr("class")
          .split(" ")[1]
          .replace("pagerow", "");
        const lastClassPageNum = this.$("#init-table-body")
          .children(".scroll__table__body__row:last-child")
          .attr("class")
          .split(" ")[1]
          .replace("pagerow", "");
        for (
          let index = firstClassPageNum;
          index < Number(lastClassPageNum) + 1;
          index++
        ) {
          if (this.$(".pagerow" + index)[0]) {
            initTopList.push(this.$(".pagerow" + index)[0].offsetTop);
          }
        }
        return { firstClassPageNum, lastClassPageNum, offsetList: initTopList };
      }
      const scrollTop = $("#init-table-body").scrollTop();
      let scrollPageNum = this.getPageNum(scrollTop, initTopList);
      function getPageNum(scrollTop, array) {
        if (scrollTop > array[array.length - 1]) {
          return array.length - 1;
        }
        for (let index = 0; index < array.length; index++) {
          if (array[index] > scrollTop) {
            return index - 1;
          }
        }
      }
    </script>
  </body>
</html>
